import React, { FC, PureComponent } from 'react'
import {
    BarChart,
    Bar,
    Rectangle,
    XAxis,
    YAxis,
    CartesianGrid,
    Tooltip,
    Legend,
    ResponsiveContainer,
} from 'recharts'

const data = [
    {
        name: 'Page A',
        uv: 4000,
    },
    {
        name: 'Page B',
        uv: 3000,
    },
    {
        name: 'Page C',
        uv: 2000,
    },
    {
        name: 'Page D',
        uv: 2780,
    },
    {
        name: 'Page E',
        uv: 1890,
    },
    {
        name: 'Page F',
        uv: 2390,
    },
    {
        name: 'Page G',
        uv: 3490,
    },
]
const BarChartDemo: FC = () => {
    return (
        <div style={{ width: '400px', height: '300px' }}>
            <ResponsiveContainer width="100%" height="100%">
                <BarChart
                    width={400}
                    height={300}
                    data={data}
                    margin={{
                        top: 5,
                        right: 20,
                        left: 0,
                        bottom: 5,
                    }}
                >
                    {/* strokeDasharray 虚线田字格样式 */}
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="name" /> {/* X轴显示的内容 */}
                    <YAxis />
                    <Tooltip />
                    <Legend />
                    <Bar
                        dataKey="uv"
                        fill="#82ca9d"
                        activeBar={<Rectangle fill="gold" stroke="purple" />}
                    />
                </BarChart>
            </ResponsiveContainer>
        </div>
    )
}

export default BarChartDemo
